<template>
  <div id="app">
    <vue-header @click="onClick"/>
    <component v-bind:is="active"></component>
    <vue-footer />
  </div>
</template>

<script>
import VueHeader from './components/header'
import VueHome from './components/home'
import VueProduct from './components/product'
import VueArticle from './components/article'
import VueContact from './components/contact'
import VueFooter from './components/footer'

export default {
  name: 'app',
  components: {
    VueHeader,
    VueHome,
    VueProduct,
    VueArticle,
    VueContact,
    VueFooter
  },
  data() {
    return {
      active: 'vue-home'
    };
  },
  methods: {
    onClick(name) {
      this.active = name;
    }
  }
}
</script>

<style>
</style>
